import React, { useEffect, useState } from 'react'
import { Button, Select, Table, Input, Space } from 'antd';
import useBusinessMap from '../../../../../../common/BusinessMap/useBusinessMap';
import { drawCircle, wktToGeom } from '../../../../../../../utils/helper/mapHelper';
import { CloseCircleOutlined } from '@ant-design/icons'
import { fromCircle } from 'ol/geom/Polygon';
import CztApi from '../../../../../../../utils/apis/CztApi';
import biaoge from './biaoge'
import { useContext } from 'react';
import ZhpgContext from '../../ZhpgContext';
import Api from '../../../../../../../utils/api';
import cztxl from '../../../../../manager/newPages/NewCzt/cztxl';
import jzzyxl from '../../../../../manager/newPages/NewJzzy/jzzyxl';

export default function YxfxXq(props) {
    // console.log("props", props);
    const map = useBusinessMap();
    const biaotouziduan = biaoge();
    const { detail } = props;
    const { zhData, yxfxData, zhjcData } = useContext(ZhpgContext);
    //小窗标题
    const [name, setName] = useState(detail.record.name);
    const [data1, setData] = useState(null);
    const [data2,setData2]=useState()

    useEffect(() => {
        const center = wktToGeom(zhData.geom).getCoordinates();
        const circle = drawCircle(map, center, detail.radius);
        console.log("props-1", detail);
        if (detail.xqzt === 2) {
            CztApi.jzzyxq(name, fromCircle(circle)).then(resp => {
                console.log("props-2", resp);
                setData(resp.data);
            })
        } else {
            CztApi.cztxq(name, fromCircle(circle)).then(resp => {
                setData(resp.data);
            })
        }


    }, [name, zhData, map, detail])
   

    //鼠标移动

    const [position, setPosition] = useState({ x: 0, y: 0 });
    const [isDragging, setIsDragging] = useState(false);
    const [mouseOffset, setMouseOffset] = useState({ x: 0, y: 0 });

    //组件初始位置居中
    useEffect(() => {
        // 获取页面的宽度和高度
        const pageWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
        const pageHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

        // 计算组件的初始位置
        const initialX = (pageWidth - 600) / 2;  // 假设组件宽度为 200px
        const initialY = (pageHeight - 500) / 2; // 假设组件高度为 200px

        setPosition({ x: initialX, y: initialY });
    }, []);

    //组件移动逻辑
    const handleMouseDown = (event) => {
        event.preventDefault();
        setIsDragging(true);
        setMouseOffset({
            x: event.clientX - position.x,
            y: event.clientY - position.y,
        });
    };
    const handleMouseUp = () => {
        setIsDragging(false);
    };

    const handleMouseMove = (event) => {
        if (!isDragging) return;
        setPosition({
            x: event.clientX - mouseOffset.x,
            y: event.clientY - mouseOffset.y,
        });
    };

    useEffect(()=>{
        Api.getConfig().then(resp=>{
            if(name){
                setData2(cztxl[name]?.templates||jzzyxl[name]?.templates|| resp?.detailTemplate?.[`${name}`])
            }
            
            //console.log('data',resp?.detailTemplate?.[`${cztxl}`])
        })
    },[name])
    let columns = data2?.map(key => {
        return {
            title:key.title || key.alias,
            dataIndex:key.dataIndex || key.name,
            width: 'auto',
        }
    })

    
    const data =data1?.map(a => {
        return {...a,...JSON.parse(a.xq)}
    }) || [];

    return (
        <div style={{
            position: 'absolute',
            top: position.y,
            left: position.x,
            //cursor: 'move',
            zIndex: 5,
            width: 600,
            height: 500,
            backgroundColor: "rgba(15, 29, 38,0.9)",
            border: '1px solid rgba(255, 255, 255, 0.5)'
        }}
            onMouseDown={handleMouseDown}
            onMouseUp={handleMouseUp}
            onMouseMove={handleMouseMove}
        >
            <div>
                <span ><h3 style={{ float: 'left', marginLeft: 10 }}>{name}</h3></span>
                <Button icon={<CloseCircleOutlined />} type={"text"} style={{
                    position: "absolute",
                    top: 10,
                    right: 10
                }} onClick={e => props.onClose?.()}></Button>
            </div>

            <div style={{ margin: 10 }}>
                <Table
                    columns={columns}
                    dataSource={data}
                    scroll={{ x: 'max-content' }}
                    bordered
                    onHeaderRow={() => ({
                        style: {
                            minWidth: 'auto',
                        },
                    })}
                    onBodyRow={() => ({
                        style: {
                            minWidth: 'auto',
                        },
                    })}
                    onRow={(record, rowIndex) => ({
                        onClick: () => {
                            const detail = {}
                            columns.forEach(col=>{
                                detail[col.title] = record[col.dataIndex]
                            })
                            props.onRightDetail?.(detail)
                        },
                    })}
                    pagination={{
                        pageSize: 5,
                    }}>
                </Table>
            </div>
        </div>
    )

}
